<template>
	<view>
		<view class="navTabBox">
			<view class="longTab">
				<view class="tab-item" v-for="(item, index) in tabList" :key="index" :class="{ on: index == tabIndex - 1 }" @click="bindTab(index)">
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view class="coupon-list" v-if="couponsList.length">
			<view class="item acea-row row-center-wrapper" v-for="(item, index) in couponsList" :key="index">
				<view class="money" :class="item.status == 0 ? '' : 'moneyGray'">
					<view>
						￥
						<text class="num">{{ item.coupon_price }}</text>
					</view>
					<view class="pic-num">{{i18n.Man}}{{ item.use_min_price }}{{i18n.Keyong}}</view>
				</view>
				<view class="text">
					<view class="condition line1">
						<view class="line-title" :class="item.status === 0 ? 'bg-color-huic' : 'bg-color-check'" v-if="item.coupon.type === 0">{{i18n.Store}}</view>
						<view class="line-title" :class="item.status === 0 ? 'bg-color-huic' : 'bg-color-check'" v-else-if="item.applicable_type === 1">{{i18n.Pinlei}}</view>
						<view class="line-title" :class="item.status === 0 ? 'bg-color-huic' : 'bg-color-check'" v-else>{{i18n.Goods}}</view>
						<view>{{ item.coupon_title }}</view>
					</view>
					<view class="data acea-row row-between-wrapper">
						<view>{{ item.start_time | timeYMD }}-{{ item.end_time | timeYMD }}</view>
						<view class="bnt gray bg-color" v-if="item.status == 0">{{i18n.Goods}}</view>
						<view class="bnt gray" v-if="item.status == 1">{{i18n.Goods}}</view>
						<view class="bnt gray" v-if="item.status == 2">{{i18n.Guoqi}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noCommodity" v-if="!couponsList.length && loading == true">
			<view class="pictrue"><image src="/static/images/noCoupon.png"></image></view>
		</view>
	</view>
</template>

<script>
	const globalData = getApp().globalData
import { getUserCoupons } from '@/api/api.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			tabIndex: 1,
			couponsList: [],
			loading: false,
			isUsed: 0,
			tabList: [
				{
					title: globalData.$t('user_coupon').Weishiyong
				},
				{
					title: globalData.$t('user_coupon').Huoze
				}
			]
		};
	},
	filters: {
		timeYMD: function(value) {
			if (value) {
				var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(value);
				return newDate[0];
			}
		}
	},
	computed: {
		i18n() {
			return globalData.$t('user_coupon');
		},
	},
	onLoad() {
		this.getUseCoupons();
	},
	methods: {
		bindTab(index) {
			this.tabIndex = index + 1;

			this.getUseCoupons();
		},
		/**
		 * 获取领取优惠券列表
		 */
		getUseCoupons: function() {
			let that = this;
			getUserCoupons({ statusTag: this.tabIndex }).then(res => {
				that.loading = true;
				that.$set(that, 'couponsList', res.data.list);
			});
		}
	}
};
</script>

<style scoped lang="scss">
.noCommodity {
	width: 400px;
	height: 300px;
	display: table-cell; /*主要是这个属性*/
	vertical-align: middle;
	text-align: center;
}
.navTabBox {
	background: #fff;
	height: 90rpx;
}
.longTab {
	display: -webkit-flex; /* Safari */
	display: flex;
	text-align: center;
}
.tab-item {
	width: 50%;
	display: inline-block;
	line-height: 90rpx;
	text {
		position: relative;
		display: inline-block;
	}
}
.tab-item.on {
	color: #ea3424;
	text {
		&:after {
			content: '';
			display: inline-block;
			width: 90%;
			height: 3rpx;
			background: #ea3424;
			position: absolute;
			left: 5%;
			bottom: 0;
		}
	}
}
.coupon-list {
	padding: 0 14px;
	margin-top: 11px;
}

.coupon-list .item {
	width: 100%;
	height: 79px;
	margin-bottom: 7px;
}
.money {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 112px;
	height: 100%;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	background-image: url('/static/images/coupon1.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	flex-direction: column;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}
.moneyGray {
	background-image: url('/static/images/coupon2.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.pic-num {
	color: #ffffff;
	font-size: 20rpx;
}
.coupon-list .item .text {
	width: 210px;
	padding: 0 7px 0 11px;
	box-sizing: border-box;
	background-color: #fff;
}
.coupon-list .item .text .condition {
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	font-size: 14px;
	color: #282828;
	height: 43px;
	line-height: 43px;
	border-bottom: 1px solid #f0f0f0;
}
.coupon-list .item .text .data .bnt {
	width: 58px;
	height: 20px;
	border-radius: 10px;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	color: #fff;
}

.condition .line-title {
	width: 90rpx;
	height: 40rpx !important;
	line-height: 1.5 !important;
	padding: 0 10rpx;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: rgba(255, 247, 247, 1);
	opacity: 1;
	border-radius: 22rpx;
	font-size: 20rpx !important;
	margin-right: 12rpx;
}
.gray {
	background-color: #ccc;
	width: 58px;
	height: 20px;
	border-radius: 10px;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	color: #fff;
}
.bg-color-huic {
	background-color: #e93323;
	border: 1px solid #e93323;
	color: #e93323;
}
.bg-color-check {
	background-color: #ccc;
	border: 1px solid #ccc;
	color: #ccc;
}
.pictrue{
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,0);
	height: 370rpx;
	width: 500rpx;
}
</style>
